<script lang="ts" setup>
import BaseSearch from '@/components/BaseSearch/index.vue'
import {computed, onMounted, reactive, ref} from 'vue'
import {IForm} from '@/interface/form'
import {IMyTableProps} from '@/interface/table'
import AddMenu from '@/views/system/menu/components/addMenu.vue'
import Api from '@/api'
import {DeleteTableList, handleTree, treeToArray} from '@/utils/utils.ts'

defineOptions({
	name: 'MenuIndex'
})
const dialogVisible = ref(false)//弹框
const title = ref('') // 弹框的标题
const editForm = ref({})//编辑的数据
const parentId = ref()//父级id
const tableCopy = ref()//复制的表格数据
const searchForm = ref<IForm>({
	data: {
		menuName: '',//菜单名称,
		status: ''//状态
	},
	otherConfig: {
		isRestSearch: true,
		labelWidth: '64px'
	},
	config: [
		{
			col: 4,
			component: 'ElInput',
			name: '菜单名称',
			bind: 'menuName',
			attr: {
				type: 'text',
				clearable: true,
				placeholder: '请输入菜单名称'
			}
		},
		{
			col: 4,
			component: 'ElSelect',
			name: '状态',
			bind: 'status',
			dictList: computed(() => dictData.value.menStatus),
			dictProps: {
				value: 'dictValue',
				label: 'dictLabel'
			},
			attr: {
				type: 'text',
				clearable: true,
				placeholder: '请输入菜单名称'
			}
		}
	]
})
const dictData = ref({
	menuType: [
		{
			dictValue: 'M',
			dictLabel: '目录'
		},
		{
			dictValue: 'C',
			dictLabel: '菜单'
		},
		{
			dictValue: 'F',
			dictLabel: '按钮'
		}
	],//菜单类型
	isFrame: [
		{
			dictValue: 1,
			dictLabel: '不外链'
		},
		{
			dictValue: 0,
			dictLabel: '外链'
		}],//是否外链
	isCache: [
		{
			dictValue: 0,
			dictLabel: '缓存'
		},
		{
			dictValue: 1,
			dictLabel: '不缓存'
		}
	],//是否缓存
	visible: [
		{
			dictValue: '1',
			dictLabel: '不显示'
		},
		{
			dictValue: '0',
			dictLabel: '显示'
		}
	],//是否显示
	menStatus: [
		{
			dictValue: '0',
			dictLabel: '正常'
		},
		{
			dictValue: '1',
			dictLabel: '停用'
		}
	]
})
//新增
const add = (row: any) => {
	if (row && row.id) {
		parentId.value = row.id
	} else {
		parentId.value = 0
	}
	title.value = 'add'
	dialogVisible.value = true
}
//修改
const edit = (item: any) => {
	editForm.value = item
	dialogVisible.value = true
	title.value = 'edit'
}
//删除
const DeleteSingle = (row: any) => {
	const params = {
		ids: [row.id]
	}
	DeleteTableList(params, false, Api.menuRemove, getList, '菜单名称', row.name)
}

// 表格数据和配置项
const table = reactive<IMyTableProps>({
	tableHeader: [
		{
			label: '菜单名称',
			prop: 'menuName',
			align: 'left'
		},
		{
			label: '图标',
			prop: 'icon',
			width: 100,
			slotName: 'icons'
		},
		{
			label: '排序',
			prop: 'orderNum',
			width: '100'
		},
		{
			label: '权限标识',
			prop: 'perms'
		},
		{
			label: '状态',
			prop: 'status',
			textType: 'tag',
			width: 100,
			dictList: computed(() => dictData.value.menStatus),
			dictProps: {
				label: 'dictLabel',
				value: 'dictValue'
			}
		},
		{
			label: '菜单类型',
			prop: 'menuType',
			textType: 'tag',
			tagType: {
				M: 'success',
				C: 'warning'
			},
			width: 100,
			dictList: computed(() => dictData.value.menuType),
			dictProps: {
				label: 'dictLabel',
				value: 'dictValue'
			}
		},
		{
			label: '创建时间',
			prop: 'createTime'
		}
	],
	tableConfig: {
		data: [],
		border: true,
		defaultExpandAll: false,
		onMethods: {},
		treeProps: {
			children: 'children',
			hasChildren: 'hasChildren'
		},
		rowKey: 'id',
		stripe: true
	},
	innerBtn: [
		{
			name: '新增',
			method: add,
			icon: 'Plus',
			code: 'menu:add'
		},
		{
			name: '编辑',
			method: edit,
			icon: 'Edit',
			code: 'menu:edit'
		},
		{
			name: '删除',
			method: DeleteSingle,
			icon: 'Delete',
			code: 'menu:delete'
		}
	],
	outerBtn: [
		{
			name: '新增',
			method: add,
			icon: 'Plus',
			code: 'menu:add'
		},
		{
			name: '展开折叠',
			method: tableOpen,
			icon: 'Sort',
			type: 'info'
		}
	],
	otherConfig: {
		innerBtnWidth: 250,
		outerBtnAlign: 'left',
		needIndex: '',
		needSelection: false,
		innerBtnFixed: 'right'
	}
})
onMounted(() => {
	getList()
})

//点击搜索
const searchFn = () => {
	if (searchForm.value.data.menuName || searchForm.value.data.status) {
		let result: any[]
		result = treeToArray(tableCopy.value)
		const data = filteredData(searchForm.value.data, result)
		table.tableConfig.data = handleTree(data)
	} else {
		getList()
	}
}
//搜索的方法
const filteredData = (form: any, data: any) => {
	const {menuName, status} = form
	return data.filter((item: any) => {
		return ((menuName === '' || item.name.includes(menuName)) && (status === '' || item.status === status))
	})
}

//查询表格数据
const getList = () => {
	Api.menuTree().then((res: any) => {
		if (res.code === 200) {
			tableCopy.value = JSON.parse(JSON.stringify(res.data))
			table.tableConfig.data = res.data || []
		}
	})
}

const keys = ref(0)

//展开折叠
function tableOpen() {
	table.tableConfig.defaultExpandAll = !table.tableConfig.defaultExpandAll
	keys.value = keys.value + 1
}
</script>

<template>
	<BaseSearch v-model="searchForm.data" :search-config="searchForm" @search-fn="searchFn"/>
	<base-table
		:key="keys"
		:inner-btn="table.innerBtn"
		:other-config="table.otherConfig"
		:outer-btn="table.outerBtn"
		:table-config="table.tableConfig"
		:table-header="table.tableHeader"
		:table-page="table.tablePage"
	>
		<template #icons="{scope}">
			<BaseIcon :icon="scope.row.icon||''"/>
		</template>
	</base-table>
	<AddMenu
		v-if="dialogVisible"
		:dict-data="dictData"
		:hide-dialog="() => (dialogVisible = false)"
		:parent-id="parentId"
		:parent-list="tableCopy"
		:row="editForm"
		:title="title"
		@success="getList()"
	/>
</template>

<style lang="scss" scoped>

</style>
